<template>
  <div>
    <!-- 添加项目按钮 -->
    <el-button type="primary" icon="el-icon-plus" @click="showAddForm">
      添加项目
    </el-button>

    <!-- 项目表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="projectName" label="项目名称" width="180" />
      <el-table-column prop="description" label="描述" width="180" />
      <el-table-column prop="createBy" label="创建人" />
      <el-table-column prop="startTime" label="开始时间">
        <template #default="scope">
          {{ formatDate(scope.row.startTime) }}
        </template>
      </el-table-column>
      <el-table-column prop="endTime" label="结束时间">
        <template #default="scope">
          {{ formatDate(scope.row.endTime) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="240">
        <template #default="scope">
          <el-link type="primary" @click="showTaskDrawer(scope.row)">
            查看任务
          </el-link>
          <el-link type="success" @click="showAddTaskDialog(scope.row)">
            添加任务
          </el-link>
          <el-link type="warning" @click="showEditProjectDialog(scope.row)">
            修改
          </el-link>

          <el-link type="warning" @click="deleteProjectDialog(scope.row)">
            删除
          </el-link>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pageNum"
        :page-size="page.pageSize"
        layout="prev, pager, next, jumper"
        :total="total"
    />

    <!-- 添加项目对话框 -->
    <el-dialog :visible.sync="dialogVisible" title="添加项目">
      <el-form :model="project" label-width="120px">
        <el-form-item label="项目名称" required>
          <el-input v-model="project.projectName" placeholder="请输入项目名称" />
        </el-form-item>
        <el-form-item label="项目描述">
          <el-input type="textarea" v-model="project.description" />
        </el-form-item>
        <el-form-item label="开始时间">
          <el-date-picker
              v-model="project.startTime"
              type="date"
              placeholder="选择开始时间"
              value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker
              v-model="project.endTime"
              type="date"
              placeholder="选择结束时间"
              value-format="yyyy-MM-dd"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </template>
    </el-dialog>

    <!-- 任务抽屉 -->
    <el-drawer
        :visible.sync="taskDrawerVisible"
        :title="`项目任务列表 - ${selectedProject?.projectName}`"
        size="50%"
    >
      <el-table :data="selectedProject?.children || []" style="width: 100%">
        <el-table-column prop="taskName" label="任务名称" width="180" />
        <el-table-column prop="description" label="描述" width="180" />
        <el-table-column prop="deadline" label="截止日期">
          <template #default="scope">
            {{ formatDate(scope.row.deadline) }}
          </template>
        </el-table-column>
        <el-table-column prop="assigneeId" label="负责人">
          <template #default="scope">
            {{ getAssigneeName(scope.row.assigneeId) }}
          </template>
        </el-table-column>
        <!-- 新增状态列 -->
        <el-table-column prop="status" label="状态">
          <template #default="scope">
            <el-tag :type="getStatusTagType(scope.row.status)">
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-link
                type="primary"
                @click="updateTaskStatus(scope.row)"
            >
              {{ getStatusButtonText(scope.row.status) }}
            </el-link>
            <el-link
                type="warning"
                @click="showEditTaskDialog(scope.row)"
                style="margin-left: 10px;"
            >
              修改
            </el-link>

            <el-link
                type="warning"
                @click="deleteTaskDialog(scope.row)"
                style="margin-left: 10px;"
            >
              删除
            </el-link>
          </template>
        </el-table-column>
      </el-table>
    </el-drawer>

    <!-- 添加任务对话框 -->
    <el-dialog
        :visible.sync="addTaskDialogVisible"
        title="添加任务"
        width="30%"
    >
      <el-form :model="taskForm" label-width="120px">
        <!-- 任务名称 -->
        <el-form-item label="任务名称" required>
          <el-input v-model="taskForm.taskName" placeholder="请输入任务名称" />
        </el-form-item>

        <!-- 任务描述 -->
        <el-form-item label="任务描述">
          <el-input
              type="textarea"
              v-model="taskForm.description"
              placeholder="请输入任务描述"
          />
        </el-form-item>

        <!-- 截止日期 -->
        <el-form-item label="截止日期">
          <el-date-picker
              v-model="taskForm.deadline"
              type="date"
              placeholder="选择截止日期"
              value-format="yyyy-MM-dd"
          />
        </el-form-item>

        <!-- 任务负责人 -->
        <el-form-item label="任务负责人">
          <el-select
              v-model="taskForm.assigneeId"
              placeholder="请选择任务负责人"
          >
            <el-option
                v-for="user in persons"
                :key="user.userId"
                :label="user.username"
                :value="user.userId"
            />
          </el-select>
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="addTaskDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitTaskForm">提交</el-button>
      </template>
    </el-dialog>

    <!-- 修改项目对话框 -->
    <el-dialog :visible.sync="editDialogVisible" title="修改项目">
      <el-form :model="editProject" label-width="120px">
        <el-form-item label="项目名称" required>
          <el-input v-model="editProject.projectName" placeholder="请输入项目名称" />
        </el-form-item>
        <el-form-item label="项目描述">
          <el-input type="textarea" v-model="editProject.description" />
        </el-form-item>
        <el-form-item label="开始时间">
          <el-date-picker
              v-model="editProject.startTime"
              type="date"
              placeholder="选择开始时间"
              value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker
              v-model="editProject.endTime"
              type="date"
              placeholder="选择结束时间"
              value-format="yyyy-MM-dd"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitEditForm">提交</el-button>
      </template>
    </el-dialog>

    <!-- 修改任务对话框 -->
    <el-dialog :visible.sync="editTaskDialogVisible" title="修改任务">
      <el-form :model="editTask" label-width="120px">
        <el-form-item label="任务名称" required>
          <el-input v-model="editTask.taskName" placeholder="请输入任务名称" />
        </el-form-item>
        <el-form-item label="任务描述">
          <el-input type="textarea" v-model="editTask.description" />
        </el-form-item>
        <el-form-item label="截止日期">
          <el-date-picker
              v-model="editTask.deadline"
              type="date"
              placeholder="选择截止日期"
              value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item label="任务负责人">
          <el-select
              v-model="editTask.assigneeId"
              placeholder="请选择任务负责人"
          >
            <el-option
                v-for="user in persons"
                :key="user.userId"
                :label="user.username"
                :value="user.userId"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="editTaskDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitEditTaskForm">提交</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {deleteProject, findPage, insert, updateProject} from "@/service/project";
import {insertTask, updateTaskStatus, updateTask, deleteTask} from "@/service/task";
import { userVoList } from "@/service/User";

export default {
  data() {
    return {
      tableData: [], // 项目列表数据
      total: 0, // 分页总数
      page: {
        pageNum: 1,
        pageSize: 10
      },
      project: {
        projectName: '',
        description: '',
        startTime: '',
        endTime: ''
      },
      editProject: {
        projectId: '',
        projectName: '',
        description: '',
        startTime: '',
        endTime: ''
      },
      editTask: {
        taskId: '',
        taskName: '',
        description: '',
        deadline: '',
        assigneeId: ''
      },
      dialogVisible: false, // 添加项目对话框显示状态
      taskDrawerVisible: false, // 任务抽屉显示状态
      selectedProject: null, // 当前选中的项目
      addTaskDialogVisible: false, // 添加任务对话框显示状态
      editDialogVisible: false, // 修改项目对话框显示状态
      editTaskDialogVisible: false, // 修改任务对话框显示状态
      taskForm: {
        taskName: '', // 任务名称
        description: '', // 任务描述
        deadline: '', // 截止日期
        projectId: '', // 项目 ID
        assigneeId: '' // 任务负责人 ID
      },
      persons: [] // 用户列表
    };
  },

  async created() {
    await this.loadData();
    this.getPersons();
  },

  methods: {
    // 加载项目数据
    async loadData() {
      const res = await findPage(this.page);
      this.tableData = res.records;
      this.total = res.total;
    },

    // 分页处理
    handleSizeChange(size) {
      this.page.pageSize = size;
      this.loadData();
    },

    handleCurrentChange(page) {
      this.page.pageNum = page;
      this.loadData();
    },

    // 显示添加项目表单
    showAddForm() {
      this.dialogVisible = true;
    },

    // 提交项目表单
    async submitForm() {
      this.project.creatorId = sessionStorage.getItem('token');
      await insert(this.project);
      this.dialogVisible = false;
      await this.loadData();
    },

    // 显示任务抽屉
    showTaskDrawer(project) {
      this.selectedProject = project;
      this.taskDrawerVisible = true;
    },

    // 显示添加任务对话框
    showAddTaskDialog(project) {
      this.taskForm.projectId = project.projectId; // 设置项目 ID
      this.addTaskDialogVisible = true;
    },

    // 显示修改项目对话框
    showEditProjectDialog(project) {
      this.editProject = { ...project }; // 复制项目数据
      this.editDialogVisible = true;
    },

    // 提交修改项目表单
    async submitEditForm() {
      try {
        await updateProject(this.editProject);
        this.$message.success("项目修改成功！");
        this.editDialogVisible = false;
        await this.loadData();
      } catch (error) {
        this.$message.error("项目修改失败，请重试！");
      }
    },

    // 显示修改任务对话框
    showEditTaskDialog(task) {
      this.editTask = { ...task }; // 复制任务数据
      this.editTaskDialogVisible = true;
    },

    // 提交修改任务表单
    async submitEditTaskForm() {
      try {
        await updateTask(this.editTask);
        this.$message.success("任务修改成功！");
        this.editTaskDialogVisible = false;
        await this.loadData();
      } catch (error) {
        this.$message.error("任务修改失败，请重试！");
      }
    },

    // 获取用户列表
    async getPersons() {
      this.persons = await userVoList();
    },

    // 提交任务表单
    async submitTaskForm() {
      try {
        await insertTask(this.taskForm);
        this.$message.success("任务添加成功！");
        this.addTaskDialogVisible = false;
        this.resetTaskForm();
        this.loadData();
      } catch (error) {
        this.$message.error("任务添加失败，请重试！");
      }
    },

    // 重置任务表单
    resetTaskForm() {
      this.taskForm = {
        taskName: '',
        description: '',
        deadline: '',
        projectId: '',
        assigneeId: ''
      };
    },

    // 根据ID获取用户名
    getAssigneeName(userId) {
      const user = this.persons.find(u => u.userId === userId);
      return user?.username || '未知';
    },

    // 日期格式化
    formatDate(dateStr) {
      return dateStr ? dateStr.split('T')[0] : '';
    },
  //删除项目
    deleteProjectDialog(val){
      console.log(val.projectId)
      this.$confirm('确定删除该项目吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        deleteProject(val.projectId).then(()=>{
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.loadData();
        })
      });
    },
    //删除任务
    deleteTaskDialog(val){
      console.log(val.taskId)
      this.$confirm('确定删除该任务吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        deleteTask(val.taskId).then(()=>{
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.loadData();
        })
      });
    },
    // 根据状态获取按钮文字
    getStatusButtonText(status) {
      switch (status) {
        case 0:
          return '开始任务';
        case 1:
          return '完成任务';
        case 2:
          return '重新开始';
        default:
          return '未知状态';
      }
    },

    // 根据状态获取按钮类型
    getStatusButtonType(status) {
      switch (status) {
        case 0:
          return 'primary'; // 未开始 - 蓝色
        case 1:
          return 'warning'; // 进行中 - 橙色
        case 2:
          return 'success'; // 已完成 - 绿色
        default:
          return 'info'; // 默认 - 灰色
      }
    },

    // 根据状态获取状态标签文字
    getStatusText(status) {
      switch (status) {
        case 0:
          return '未开始';
        case 1:
          return '进行中';
        case 2:
          return '已完成';
        default:
          return '未知状态';
      }
    },

    // 根据状态获取状态标签类型
    getStatusTagType(status) {
      switch (status) {
        case 0:
          return 'info'; // 未开始 - 灰色
        case 1:
          return 'warning'; // 进行中 - 橙色
        case 2:
          return 'success'; // 已完成 - 绿色
        default:
          return 'info'; // 默认 - 灰色
      }
    },

    // 更新任务状态
    async updateTaskStatus(task) {
      let newStatus;
      switch (task.status) {
        case 0:
          newStatus = 1; // 从未开始 -> 进行中
          break;
        case 1:
          newStatus = 2; // 从进行中 -> 已完成
          break;
        case 2:
          newStatus = 0; // 从已完成 -> 未开始
          break;
        default:
          newStatus = 0;
      }

      // 调用接口更新状态
      await updateTaskStatus({ taskId: task.taskId, status: newStatus });

      // 更新本地数据
      task.status = newStatus;
    }
  }
};
</script>

<style scoped>
/* 自定义样式 */
.el-drawer__header {
  margin-bottom: 20px;
}

.el-link {
  margin-right: 10px;
}
</style>
